<template>
  <div>
<div class="top">
    <div class="search">
        <span class="iconfont icon-icon_search"></span>
        <input type="text">
    </div>
     <span class="top_btn" @click="$router.back()">取消</span>
</div>
    <div class="history">
        <span>搜索历史</span>
        <div class="clear_btn iconfont icon-icon_trashcan"></div>
        <div class="his_seh">
            <li>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
            </li>
            <div class="hott">热门搜索</div>
            <li>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
                <a>啊的考试</a>
            </li>
        </div>
    </div>
</div>
</template>

<script>
export default {
}
</script>
<style scoped>
.top{
    height: 60px;
    position: relative;
    background: #1296db;
    font-size: 18px;
}
.top_btn{
    position: absolute;
    top: 30%;
    right: 7%;
}
.search{
    width: 95%;
    position: absolute;
    left: 5%;
    top: 20%
}
.search input{
    border:none;
    width: 60%;
    height: 35px;
    border-radius: 5px;
    padding-left: 40px;
    font-size: 16px
}
.search span{
    position: absolute;
    top: 25%;
    left: 4%;
    color: #ccc
}
/* 搜索历史 */
.history{
    position: relative;
    height: 45px;
    width: 100%;
}
.history span{
    font-size: 16px;
    color:rgb(158, 157, 157);
    position: absolute;
    left: 7%;
    top: 10%;
}
.clear_btn{
    position: absolute;
    top: 10.5%;
    right: 7%;
    font-size: 16px;
    color: rgb(158, 157, 157);
}
.his_seh{
    position: absolute;
    top: 30px;
    padding: 0 10px
}
.his_seh li{
    width: 100%;
display: flex;
flex-wrap: wrap;
justify-content:left;

}
.his_seh li a{
    width: 37%;
    height: 30px;
    background: rgb(226, 225, 225);
    text-align: center;
    line-height: 35px;
    padding: 5px 10px;
    margin: 5px 3%
}
/* 热门搜索 */
.hott{
    font-size: 16px;
    color:rgb(158, 157, 157);
    margin:10px 0 5px 7%
}
.hot a{
    width: 135px;
    height: 30px;
    background: rgb(226, 225, 225);
    text-align: center;
    line-height: 35px;
    padding: 5px 10px;
    margin: 5px 3%
}
</style>
